<ng-container *transloco="let t; read: 'all-collections'">
  <app-side-nav-companion-bar [hasFilter]="false" (filterOpen)="filterOpen.emit($event)">
    <h2 title>{{t('title')}}</h2>
    <h6 subtitle>{{t('item-count', {num: collections.length | number})}}</h6>
  </app-side-nav-companion-bar>
  <app-card-detail-layout
    [isLoading]="isLoading"
    [items]="collections"
    [filterOpen]="filterOpen"
    [jumpBarKeys]="jumpbarKeys"
    [trackByIdentity]="trackByIdentity"
  >
    <ng-template #cardItem let-item let-position="idx">
      <app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions"
                     [imageUrl]="imageService.getCollectionCoverImage(item.id)"
                     (clicked)="loadCollection(item)"></app-card-item>
    </ng-template>

    <ng-template #noData>
      {{t('no-data')}}
      <ng-container *ngIf="isAdmin$ | async"> {{t('create-one-part-1')}} <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/collections" rel="noopener noreferrer" target="_blank">{{t('create-one-part-2')}}<i class="fa fa-external-link-alt ms-1" aria-hidden="true"></i></a></ng-container>
    </ng-template>
  </app-card-detail-layout>

</ng-container>
